import { useState, useCallback } from 'react';
import {
    ShopOutlined,
    SettingOutlined,
    HomeOutlined,
    DollarOutlined,
    CheckSquareOutlined,
} from '@ant-design/icons';
import { Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
// import type { MenuProps } from 'antd';
// type MenuItem = Required<MenuProps>['items'][number];

// 菜单数据
const items: any[] = [
    {
        label: '首页',
        key: '/home',
        icon: <HomeOutlined />,
    },
    {
        label: '预约管理',
        key: '/Bookingmsg',
        icon: <CheckSquareOutlined />,
        children: [
            {
                label: '预约挂号',
                key: '/Bookingmsg/BookRegister',
            },
            {
                label: '预约核酸检测',
                key: '/Bookingmsg/BookTest',
            },
            {
                label: '预约体检',
                key: '/Bookingmsg/BookMedical',
            },
            {
                label: '医生排班',
                key: '/Bookingmsg/BookScheduling',
            },
        ],
    },
    {
        label: '费用管理',
        key: '/Costmsg',
        icon: <DollarOutlined />,
        children: [
            {
                label: '门诊消费记录',
                key: '/Costmsg/CostOutConsume',
            },
            {
                label: '门诊充值记录',
                key: '/Costmsg/CostOutRecharge',
            },
            {
                label: '住院消费记录',
                key: '/Costmsg/CostHospConsume',
            },
            {
                label: '住院充值记录',
                key: '/Costmsg/CostHospRecharge',
            },
            {
                label: '病案配送记录',
                key: '/Costmsg/CostDelivery',
            },
            {
                label: '退款记录',
                key: '/Costmsg/CostRefund',
            },
        ],
    },
    {
        label: '医院信息',
        key: '/Hospitalmsg',
        icon: <ShopOutlined />,
        children: [
            {
                label: '医生管理',
                key: '/Hospitalmsg/Doctor',
            },
            {
                label: '科室管理',
                key: '/Hospitalmsg/Department',
            },
            {
                label: '体检套餐',
                key: '/Hospitalmsg/Test',
            },
            {
                label: '健康百科',
                key: '/Hospitalmsg/Health',
            },
            {
                label: '医院导航',
                key: '/Hospitalmsg/Navigation',
            },
            {
                label: '医院简介',
                key: '/Hospitalmsg/Introduction',
            },
            {
                label: '预约须知',
                key: '/Hospitalmsg/Notice',
            },
            {
                label: '病案配送须知',
                key: '/Hospitalmsg/DeliveryNotice',
            },
            {
                label: '用户反馈管理',
                key: '/Hospitalmsg/Feedback',
            },
        ],
    },
    {
        label: '系统设置',
        key: '/Config',
        icon: <SettingOutlined />,
        children: [
            {
                label: '管理员设置',
                key: '/Config/Administrators',
            },
            {
                label: '角色管理',
                key: '/Config/Role',
            },
            {
                label: '职称管理',
                key: '/Config/Title',
            },
            {
                label: '消息公告',
                key: '/Config/Message',
            },
            {
                label: '修改密码',
                key: '/Config/Changepassword',
            },
        ],
    },
];

const Comp: React.FC = () => {
    const navigateTo = useNavigate();
    const Route = useLocation();

    const menuClick = useCallback(
        (e: { key: string }) => {
            // 路由跳转
            navigateTo(e.key);
        },
        [navigateTo]
    );

    // Route.pathname跟items数组的children的key值进行对比，找到这个key给openKeys作为初始值
    let firstOpenKey: string = '';
    function findKey(obj: { key: string }) {
        return obj.key === Route.pathname;
    }
    // 遍历children对比
    for (let i = 0; i < items.length; i++) {
        if (
            items[i]!['children'] &&
            items[i]!['children'].length > 0 &&
            items[i]!['children'].find(findKey)
        ) {
            firstOpenKey = items[i]!.key as string;
            break;
        }
    }

    const [openKeys, setOpenKeys] = useState([firstOpenKey]);
    const handleOpenChange = useCallback((keys: string[]) => {
        setOpenKeys([keys[keys.length - 1]]);
        console.log(keys);
    }, []);

    return (
        <Menu
            theme="dark"
            defaultSelectedKeys={[Route.pathname]}
            mode="inline"
            items={items}
            onClick={menuClick}
            openKeys={openKeys}
            onOpenChange={handleOpenChange}
            style={{ position: 'fixed', top: 0, width: '200px' }}
        />
    );
};

export default Comp;
